<template>
  <div ref="barChart" style="width:100%;height:350px;"/>
</template>

<script>
import echarts from 'echarts'
import resize from '@/utils/resize'
import { setWatermark } from '@/utils'

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Array,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    },
    toolName: {
      type: String,
      default: ''
    },
    dataReverse: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: '#99a9bf'
    },
    xType: {
      type: String,
      default: 'category'
    },
    yType: {
      type: String,
      default: 'value'
    },
    barWidth: {
      type: String,
      default: '30'
    },
    numPosition: {
      type: String,
      default: 'top'
    }
  },
  data() {
    return {
      chart: null,
      data: [],
      nameData: [],
      numData: []
    }
  },
  watch: {
    chartData(val) {
      this.data = []
      this.nameData = []
      this.numData = []

      this.data = val
      for (var i = 0; i < this.data.length; i++) {
        this.nameData.push(this.data[i].name)
        this.numData.push(this.data[i].num)
      }

      if (this.chart) {
        this.setOptions()
      } else {
        this.initChart()
      }
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions() {
      this.chart.setOption({
        backgroundColor: {
          image: setWatermark(),
          repeat: 'repeat'
        },
        title: {
          text: this.title,
          x: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        toolbox: {
          right: 15,
          feature: {
            saveAsImage: {
              backgroundColor: '#FFF'
            },
            dataView: {
              show: true
            }
          }
        },
        grid: {
          left: '3%',
          containLabel: true
        },
        calculable: true,
        xAxis: {
          type: this.xType,
          data: this.nameData
        },
        yAxis: {
          type: this.yType,
          inverse: this.dataReverse,
          data: this.nameData,
          axisLabel: {
            formatter: function(value) {
              var texts = value
              if (texts.length > 8) {
                texts = texts.substr(0, 8) + '...'
              }
              return texts
            }
          }
        },
        series: [
          {
            name: this.toolName,
            type: 'bar',
            barWidth: this.barWidth,
            animationEasing: 'elasticOut',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: this.numPosition
                },
                color: this.color
              }
            },
            inverse: this.dataReverse,
            data: this.numData
          }
        ]
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.barChart)
      setTimeout(() => {
        this.setOptions()
      }, 300)
    }
  }
}
</script>
